Component({
  externalClasses: ["t-class-title"],
  properties: {
    title: { type: String, value: "" }, // 标题
    inputtype: { type: String, value: "text" }, // 类型: text | number
    type: { type: String, value: "input" }, // 类型: input | textarea | select
    value: { type: String, value: "" }, // 值
    placeholder: { type: String, value: "请输入" }, // 占位符
    required: { type: Boolean, value: false }, // 是否必填
    arrow: { type: Boolean, value: false }, // 是否显示箭头
    note: { type: String, value: "" }, // 备注
    disabled: { type: Boolean, value: false }, // 是否禁用
    maxlength: { type: Number, value: 140 }, // 输入框或文本域的最大长度
    options: { type: Array, value: [] }, // 标题
  },

  data: {
    pickerVisible: false,
    datetimePickerVisible: false, // 时间选择器是否可见
  },

  methods: {
    // 内部输入变化时，向外部触发 change 事件
    onInputChange(e) {
      this.triggerEvent("change", e.detail);
    },

    // 单元格点击时，向外部触发 tap 事件
    onCellTap(e) {
      console.log("---onCellTap-----", this.properties.type);
      switch (this.properties.type) {
        case "select": {
          this.setData({
            pickerVisible: true,
          });
          break;
        }
        case "datetime": {
          this.setData({
            datetimePickerVisible: true,
          });
          break;
        }
        default:
          this.triggerEvent("tap", e);
      }
    },

    // 隐藏选择器
    hidePicker() {
      this.setData({
        pickerVisible: false,
      });
    },

    // 隐藏日期选择器
    hideDatetimePicker() {
      this.setData({
        datetimePickerVisible: false,
      });
    },

    // 确认选择值
    onPickerConfirm(e) {
      const { value } = e.detail;
      e.detail.value = value[0];
      this.triggerEvent("change", e.detail);
      this.hidePicker();
    },
    // 时间选择器确认
    onDatetimeConfirm(e) {
      // const { value } = e.detail;
      this.triggerEvent("change", e.detail);
      this.hideDatetimePicker();
    },
  },
});
